<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知了堂年终回顾2</title>
    <link rel="stylesheet" href="css/swiper-bundle.min.css">  
    <link rel="stylesheet" href="css/animate.min.css">
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    .swiper {
        width: 100%;
        height: 100%;
      }
    .bg2{
        width: 100%;
        height: 100%;
        background-image: url(imgs/bg2.png);
        background-size: 100% 100%;      
        position: relative;
    }
    .logo3{
        width: 26%;
        height: 5%;
        background-size: 100% 100%;
        background-image: url(imgs/logo3.png);
        position: absolute;
        left: 8%;
        top: 4%;
    }
    .h1{
        font-size: 20px;
        position: absolute;
        left: 10%;
        top: 10%;
        color: white;
    }
    .p1{
        font-size: 16px;
        color: white;
        position: absolute;
        left: 10%;
        top: 15%;
    }
    .page1{
        width: 25%;
        height: 25%;
        background-size: 100% 100%;
        background-image: url(imgs/page1.png);
        background-repeat: no-repeat;
        position: absolute;
        top: 55%;
        left: 29%;
        z-index: 1;
    }
    .page2{
        width: 65%;
        height: 30%;
        background-size: 100% 100%;
        background-image: url(imgs/page2.png);
        background-repeat: no-repeat;
        position: absolute;
        top: 70.5%;
        z-index: 2;
    }
    .page3{
        width: 37%;
        height: 22%;
        background-size: 100% 100%;
        background-image: url(imgs/page3.png);
        background-repeat: no-repeat;
        position: absolute;
        top: 77%;
        left: 43%;
        z-index: 1;
    }
    .page4{
        width: 100%;
        height: 42%;
        background-size: 100% 100%;
        background-image: url(imgs/page4.png);
        background-repeat: no-repeat;
        position: absolute;
        top: 58.5%;
        z-index: 0;
    }
    .page11{
        width: 25%;
        height: 25%;
        background-size: 100% 100%;
        background-image: url(imgs/page11.png);
        background-repeat: no-repeat;
        position: absolute;
        top: 49%;
        z-index: 1;
    }
    .bg3{
        background-image: url(imgs/bg3.png);
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        position: relative;
    }
    .page22{
        width: 100%;
        background-size: 100% ;
        background-repeat: no-repeat;
        position: absolute;
    }
    .a1{
        width: 100%;
        position: absolute;
        z-index: 1;
    }
    .a3{
        width: 50%;
        position: absolute;
        left: 50%;
        z-index: 1;
    }
    .a4{
        width: 25%;
        position: absolute;
        left: 7%;
        top: 2%;
        z-index: 2;
    }
    .bg3 .page21{
        width: 100%;
        height: 80%;
        position: absolute;
        top: 20%;
        bottom: 0;
        z-index: 2;
    }
    .bg3 .page21 img{
        width: 100%;
    }
    .a5{
        position: absolute;
    }
    .year{
        color: white;
        text-align: right;
        position: absolute;
        right: 10%;
        bottom: 26%;
        width: 100%;
    }
    .bg4{
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        background-image: url(imgs/bg4.png);
        position: relative;
    }
    .bg4 img{
        width: 25%;
    }
    .b1{
        position: absolute;
        top: 3%;
        left: 8%;
    }
    .but{
        position: absolute;
        top: 14%;
        left: 8%;
        color: white;
    }
    .b2{
        position: absolute;
        bottom: 0;
    }
    .bg5{
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        background-image: url(imgs/bg3.png);
        position: relative;
    }
    .c1{
        top: 3%;
        right: 10%;
        position: absolute;
    }
    .c2{
        position: absolute;
        right: 10%;
        top: 20%;
    }
    .c3{
        position: absolute;
        right: 0;
        top: 50%;
    }
    .c4{
        position: absolute;
        left: 4%;
        top: 40%;
    }
    .c5{
        position: absolute;
        bottom: 0;
    }
    .c6{
        position: absolute;
        right: 5%;
        bottom: 0;
    }
    .c7{
        position: absolute;
        bottom: 0;
    }
    .bg6{
        background-image: url(imgs/bg5.png);
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        position: relative;
    }
    .d1{
        position: absolute;
        top: 3%;
        left: 10%;        
    }
    .d2{
        position: absolute;
        bottom: 0;
    }
    .d3{
        position: absolute;
        right: 4%;
        top: 30%;
    }
    .d4{
        position: absolute;
        right: 0;
        top: 28%;
    }
    .d5{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 80%;
        left: -5%;
        color: white;
        text-align: right;
    }
    .bg7{
        background-image: url(imgs/bg3.png);
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        position: relative;
    }
    .e1{
        position: absolute;
        top: 3%;
        left: 10%; 
    }
    .e2{
        position: absolute;
        z-index: 1;
    }
    .e3{
        position: absolute;
        bottom: 13%;
        z-index: 0;
    }
    .e4{
        position: absolute;
        bottom: 1%;
        left: 5%;
        z-index: 2;
    }
    .e5{
        position: absolute;
        bottom: 0;
        z-index: 3;
    }
    .e6{
        position: absolute;
        left: 20%;
    }
    .e7{
        position: absolute;
        bottom: 10%;
        right: 15%;
        z-index: 4;
    }
    .A1{
        color: white;
        position: relative;
        top: 10%;
        left: 15%;
    }
    .f1{
        position: absolute;
        left: 23%;
        width: 2px;
        height: 100%;
    }
    .f2{
        position: absolute;
        left: 16%;
        width: 2px;
        height: 100%;
    }
    .f3{
        position: absolute;
        left: 9%;
        width: 2px;
        height: 100%;
    }
    .f4{
        color: yellow;
    }
    .f5{
        position: absolute;
        left: 30%;
        width: 2px;
        height: 100%;
    }
    .g1{
        position: absolute;
        left: 8%;
        top: 18%;
        color: white;
        text-align: center;
        width: 300px;
        height: 50px;
        border-bottom: 1px solid white;
    }
    .g2{
        color: white;
        position: absolute;
        left: 41%;
        top: 28%;
        text-align: center;
        width: 50px;
        height: 30px;
        border-bottom: 5px solid red;
    }
    .g3{
        color: white;
        font-size: 20px;
        position: absolute;
        top: 35%;
        left: 30%;
        text-align: center;
    }
    .g4{
        position: absolute;
        bottom: 4%;
        right: 10%;
        font-size: small;
        color: white;
        text-align: center;
        z-index: 3;
    }
    .swiper-slide{
        overflow: hidden;
    }
</style>
<body>
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="bg2">
                <div class="logo3"></div>
                <h1 class="h1 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="1.5s">Hi,包哲笙</h1>
                <p class="p1 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="1.5s">2021年度学习报告，
                    <br>为更优秀的自己
                </p>
                <div class="page1 ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="1.1s"></div>
                <div class="page2 ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.4s"></div>
                <div class="page3 ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.7s"></div>
                <div class="page4 ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.9s"></div>
                <div class="page11 ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="1.2s"></div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="bg3">
                <div class="page22">
                    <img class="a1 ani" src="imgs/page22.png" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="0.7s">
                    <img class="a3 ani" src="imgs/page23.png" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="1.1s">
                </div>
                <div><img class="a4 ani" src="imgs/logo1.png" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="0.9s"></div>
                <div class="page21"><img class="a5 ani" src="imgs/page21.png" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="0.4s">
                    <div class="year ani" style="font-size: 22px;" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="0.9s">2015
                        <span style="font-size: 18px;">
                            <br>淳朴的你进入成都理工大学工程技术学院
                            <br>在大学期间你 积极向上，努力上进
                        </span>
                    </div>
                </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="bg4">
                <div><img class="b1 ani" src="imgs/logo3.png" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="0.7s">
                    <div class="but ani" style="font-size: 20px;" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="0.8s">然而，
                        <span style="font-size: 18px;">
                            <br>你并没有停止学习的步伐
                            <br>选择走进知了堂继续提升自己
                            <br>一路向前
                        </span>
                    </div>
                </div>
                <div><img class="b2 ani" src="imgs/page31.png" style="width: 100%;" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="0.4s"></div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="bg5">
                <div class="C1">
                    <img class="c1" src="imgs/logo3.png" style="width: 25%;">
                    <img class="c2 ani" src="imgs/page41.png" style="width: 25%;" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
                    <img class="c3 ani" src="imgs/page41.png" style="width: 20%;" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.8s">
                    <img class="c4 ani" src="imgs/page42.png" style="width: 25%;" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.1s">
                </div>
                <div class="C2">
                    <img class="c5 ani" src="imgs/page43.png" style="width: 100%;" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="0.4s">
                    <img class="c6 ani" src="imgs/page44.png" style="width: 50%;" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.9s">
                    <img class="c7 ani" src="imgs/page45.png" style="width: 40%;" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.9s">
                </div>
                <div class="A1 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="0.8s">
                    <p class="f5">今天</p>
                    <p class="f1">是知了堂陪伴你的第<span style="font-size: 20px;" class="f4">64</span>天</p>
                    <p class="f2">见证了你一步一步成长</p>
                    <p class="f3">让优秀更加优秀</p>
                </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="bg6">
                <img class="d1" src="imgs/logo3.png" style="width: 25%;">
                <img class="d2" src="imgs/page12.png" style="width: 50%;">
                <img class="d3 ani" src="imgs/page51.png" style="width: 80%;" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
                <img class="d4 ani" src="imgs/page52.png" style="width: 70%;" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.8s">
                <div class="d5 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="0.8s">
                    <p style="font-size: 22px;">未来,
                    <br><span style="font-size: 20px;">知了堂将继续陪伴你
                    <br>能力提升、就业服务</span>
                    </p>       
                </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="bg7">
                <img class="e1" src="imgs/logo3.png" style="width: 25%;">
                <img class="e2" src="imgs/bg6.png" style="width: 100%;">
                <img class="e3" src="imgs/page61.png" style="width: 100%;">
                <img class="e4 ani" src="imgs/page62.png" style="width: 90%;" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="0.4s">
                <img class="e5 ani" src="imgs/page63.png" style="width: 100%;" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="0.4s">
                <img class="e6" src="imgs/page64.png" style="width: 60%;">
                <img class="e7 ani" src="imgs/page66.gif" style="width: 20%;" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="0.8s">
                <div class="g1 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="0.8s">2022
                    <br>我的年度词
                </div>
                <div class="g2 ani" style="font-size: 25px;" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="0.8s">C位</div>
                <div class="g3 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="0.8s">你站的地方
                    <br>就是绝对的c位
                </div>
                <div class="g4 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="0.8s">识别二维码
                    <br>获取您的年度关键词
                </div>
            </div>
          </div>
        </div>
    </div>
</body>
<script src="js/swiper-bundle.min.js"></script>
<script src="js/swiper.animate1.0.3.min.js"></script>
<script type="text/javascript">
    var mySwiper = new Swiper('.mySwiper',{
     direction: "vertical", // 垂直切换选项
     loop: false, // 循环模式选项
     on:{
      init: function(){
       swiperAnimateCache(this); //隐藏动画元素 
       this.emit('slideChangeTransitionEnd');//在初始化时触发一次slideChangeTransitionEnd事件
      }, 
      slideChangeTransitionEnd: function(){ 
       swiperAnimate(this); //每个slide切换结束时运行当前slide动画
       // this.slides.eq(this.activeIndex).find('.ani').removeClass('ani');//动画只展示一次
      } 
     }
    });
   </script>
</html>